<template>
  <div>
    <Button
      :countTime="countTime"
      :loading="loading"
      :type="type"
      :size="size"
      :ghost="ghost"
      :disabled="disabled||clicked"
      :icon="icon"
      :shape="shape"
      :long="long"
      @click="handleClick"
    >{{buttonText}}</Button>
  </div>
</template>

<script>
export default {
  name: 'iconChoose',
  props: {
    text: {
      type: String,
      default: '确认'
    },
    autoCountDown: {
      type: Boolean,
      default: true
    },
    countTime: {
      type: [Number, String],
      default: 60
    },
    suffixText: {
      type: String,
      default: '后重试'
    },
    type: String,
    size: String,
    loading: {
      type: Boolean,
      default: false
    },
    ghost: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    icon: String,
    shape: String,
    long: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      buttonText: this.text,
      count: Number(this.countTime),
      clicked: false
    }
  },
  methods: {
    init () {},
    handleClick () {
      if (this.autoCountDown) {
        this.clicked = true
        this.countDown()
      }
      this.$emit('on-click', true)
    },
    startCountDown () {
      this.clicked = true
      this.countDown()
    },
    countDown () {
      let that = this
      if (this.count == 0) {
        this.clicked = false
        this.count = this.countTime
        this.buttonText = this.text
        return
      } else {
        this.buttonText = this.count + ' 秒' + this.suffixText
        this.count--
      }
      setTimeout(function () {
        that.countDown()
      }, 1000)
    },
    setText (value) {
      if (value === this.buttonText) {
        return
      }
      this.buttonText = value
    }
  },
  watch: {
    text (val) {
      this.setCurrentValue(val)
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style lang="less">
</style>
